<template>
	<view class="module-wrap">
		<view class="title-wrap">
			<view
				class="title-list"
				:class="[item.isRedDot ? 'is_reddot' : '']"
				v-for="(item, index) in list"
				:key="index"
				@tap="toLink(item.url, {}, item.callFn)"
			>
				<block v-if="item.type == 'time'">
					<cl-select
						v-model="dateVal"
						mode="date"
						:border="false"
						@change="dateChange"
					></cl-select>
				</block>
				<block v-else>
					<image
						:style="{ width: `${size}rpx`, height: `${size}rpx` }"
						:src="item.img"
						mode="scaleToFill"
					></image>
					<!-- <cl-image :src="item.img" :size="50" mode="scaleToFill"></cl-image> -->
					<text class="fs-24 text-sub">{{ item.text }}</text>
				</block>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, defineComponent, PropType } from "vue";

import dayjs from "dayjs";
import { useCool, useStore } from "/@/cool";
const { router } = useCool();

function toLink(link: string, data?: any, callFn?: any) {
	if (callFn) {
		callFn();
		return false;
	}
	router.push({
		path: link,
		query: data,
	});
}

type list = {
	[key: string]: any;
	text: string;
	img: string;
	url: string;
}[];

const props = defineProps({
	list: {
		type: Array as PropType<list>,
		default: () => [],
	},
	marginBottom: {
		type: String,
		default: "10px",
	},
	size: {
		type: Number,
		default: 44,
	},
});

const dateVal = ref<any>(dayjs().format("YYYY-MM-DD"));

const emit = defineEmits(["dateConfirm"]);

function dateChange(e: any) {
	emit("dateConfirm", e);
}

defineExpose({
	marginBottom: props.marginBottom,
});
</script>

<style lang="scss" scoped>
.title-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100rpx;
	padding: 0 30rpx;
	margin-bottom: v-bind("marginBottom");
	background-color: #fff;
	.title-list {
		display: flex;
		align-items: center;

		image {
			// width: 40rpx;
			// height: 40rpx;
		}
		text {
			margin-left: 14rpx;
		}
		&.is_reddot {
			position: relative;
			&::before {
				content: "";
				position: absolute;
				top: -2px;
				// bottom: 0;
				// margin: auto 0;
				left: 32rpx;
				display: block;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: red;
			}
		}
	}
}
</style>
